<template>
  <div class="course-r-list">
    <div class="page-title flex-center-wrap">
      <img
        class="page-icon"
        src="//image.zlketang.com/public/news/others/imgs/web_pc/74b8071398eed4d6e677625270bc4558.png"
        alt=""
      />
      <div class="page-title-h">
        好课专区·通关保障
      </div>
    </div>
    <!-- <pre>
          {{list}}
        </pre> -->
    <div class="grid-container">
      <a
        :class="[
          'pc-item flex-center pr',
          'grid-item-' + index,
          index === 0 ? 'one-item' : 'other-item',
          getWidth(index)
        ]"
        v-for="(item, index) in list"
        :key="item.index"
        @click.prevent="goToPage(item)"
        :href="getUrl(item)"
      >
        <img
          class="prod-img cu"
          v-if="item.cover_url"
          :src="parseResourceUrl(item.cover_url)"
        />
        <img
          class="prod-img"
          v-else
          :src="
            item.cover_url
              ? '//image.zlketang.com/public/news/others/pc_web/5de1863a119ed800d2e7c8d9580ca0c1.png'
              : '//image.zlketang.com/public/news/others/imgs/web_pc/c7558b3ea66273ae93d84fc563df89cc.png'
          "
          alt=""
        />
      </a>
    </div>
  </div>
</template>

<script>
export default {
  name: 'courseRecommendations',
  props: {
    list: () => []
  },
  data() {
    return {
      zlaBtn: {
        key_name: '',
        key_content: ''
      }
    }
  },
  watch: {
    zlaBtn: {
      handler() {
        this.sendZlaClick()
      },
      deep: true
    }
  },
  methods: {
    getWidth(index) {
      if (+index === 0) {
        return 'w-496'
      }
      if ([1, 3].includes(+index)) {
        return 'w-394'
      }
      if ([2, 4].includes(+index)) {
        return 'w-294'
      }
    },
    // 之了数据点击
    sendZlaClick() {
      this.keyClick({
        ...this.zlaBtn
      })
    },
    goToPage(row) {
      let url = this.getUrl(row)
      if (!url) return
      let { jump_type, jump_url, product_name, live_name } = row
      let key_content = ''
      switch (+jump_type) {
        case 1:
          key_content = jump_url
          break
        case 2:
          key_content = product_name
          break
        case 3:
          key_content = live_name
          break
      }
      if (key_content) {
        this.zlaBtn = {
          key_name: `热门活动_${key_content}`,
          key_content
        }
      }
      this.goTo(url, {
        query: {
          from_type: 'recommend'
        }, // 页面参数
        // delay: 200, // 延迟执行跳转
        replace: true, // target为“_blank”时，replace不生效
        target: '_blank' // _blank：跳转新页面，此时delay：不生效
      })
    },
    // 获取跳转链接
    getUrl(row) {
      let msg = '数据格式错误,请联系管理员'
      if (!this.isObject(row)) {
        this.$message.error(msg)
        return
      }

      let { jump_type, jump_url, product_id, live_id } = row
      if (+jump_type === 1) {
        // 跳转链接
        if (!jump_url) {
          this.$message.error(msg)
          return
        }
        return jump_url
      }

      if (+jump_type === 2) {
        // 商品
        if (!product_id) {
          this.$message.error(msg)
          return
        }
        return this.parseFullPath(
          `/course_detail.html?product_id=${product_id}`
        )
      }

      if (+jump_type === 3) {
        // 直播
        if (!live_id) {
          this.$message.error(msg)
          return
        }
        return this.parseFullPath(`/vcourse/live.html?live_id=${live_id}`)
      }
    }
  }
}
</script>

<style scoped>
.grid-item-0 {
  grid-area: main0;
}
.grid-item-1 {
  grid-area: main1;
}
.grid-item-2 {
  grid-area: main2;
}
.grid-item-3 {
  grid-area: main3;
}
.grid-item-4 {
  grid-area: main4;
}
.course-r-list {
  margin: 30px auto;
  width: 1200px;
}
.grid-container {
  margin-top: 30px;
  height: 200px;
  display: grid;
  grid:
    'main0 main1 main2'
    'main0 main3 main4';
  grid-gap: 8px;
}

.one-item {
  width: 496px;
  height: 200px;
}
.other-item {
  width: 394px;
  height: 96px;
}
.prod-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}
.page-icon {
  width: 26px;
  height: 26px;
}
.page-title-h {
  margin-left: 8px;
  height: 30px;
  font-size: 22px;
  font-weight: 600;
  color: #383838;
  line-height: 30px;
}
.w-496 {
  width: 496px;
}
.w-394 {
  width: 394px;
}
.w-294 {
  width: 294px;
}
</style>
